<template>
  <div class="article_detail">
    <content-header showBack>文章详情</content-header>
    <div class="container">
      <div class="body">
        <div class="spin" v-if="loading"><a-spin /></div>
        <a-tabs default-active-key="1" v-else>
          <a-tab-pane key="1" tab="文章信息">
            <a-form-model layout="horizontal" :model="form" ref="form" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-form-model-item label="标题" prop="title" required>
                <a-input v-model="form.title" />
              </a-form-model-item>
              <a-form-model-item label="文章分类" prop="class_id" required>
                <a-tree-select
                  v-model="form.class_id"
                  :treeDefaultExpandedKeys="[form.class_id]"
                  :replaceFields="{key:'id',value:'id'}"
                  style="width: 200px"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  :tree-data="classData"
                  placeholder="选择栏目"
                >
                </a-tree-select>
              </a-form-model-item>
              <a-form-model-item label="文章封面" prop="pic" required>
                <picSelector :value="form.pic" @confirm="(path)=>form.pic = path" ></picSelector>
              </a-form-model-item>
              <a-form-model-item label="关联商品" prop="product_id">
               <productSelect :value="form.product_id" @confirm="(id)=>{form.product_id = id;}"></productSelect>
              </a-form-model-item>
              <a-form-model-item label="作者" prop="author">
                <a-input v-model="form.author" />
              </a-form-model-item>
            </a-form-model>
          </a-tab-pane>
          <a-tab-pane key="2" tab="文章详情" style="width:100%" forceRender>
            <div id="editor">
              <vue-ueditor-wrap v-model="form.content" :config="ueConfig"></vue-ueditor-wrap>
            </div>
          </a-tab-pane>
          <a-tab-pane key="3" tab="其他设置">
            <a-form-model layout="inline" :model="form" ref="form" >
              <a-form-model-item label="浏览量" prop="hits" required>
                <a-input v-model="form.hits" />
              </a-form-model-item>
              <a-form-model-item label="排序" prop="sort" required>
                <a-input v-model="form.sort" />
              </a-form-model-item>
            </a-form-model>
          </a-tab-pane>
        </a-tabs>
        <a-button type="primary" class="btn" @click="submitForm">提交</a-button>
      </div>
    </div>
  </div>
</template>

<script>
import contentHeader from 'components/common/content-header'
import picSelector from 'components/picSelector'
import productSelect from 'components/productSelect'
import ueConfig from 'public/config/ueConfig.js'
import VueUeditorWrap from 'vue-ueditor-wrap'
import request from 'api/request'

// const classData = [
//   {id:0,title:"无栏目"},
//   {id:1,title:"企业新闻",children:[
//     {id:2,title:"企业一"}
//   ]}
// ]

export default {
  components:{
    contentHeader,
    picSelector,
    productSelect,
    VueUeditorWrap
  },
  data() {
    return {
      ueConfig,
      labelCol: { span: 2 },
      wrapperCol: { span: 16 },
      form:{
        class_id:'',
        title:"",
        pic:"",
        author:"",
        content:"",
        sort:0,
        product_id:'',
        hits:0
      },
      loading:false,
      mod:'add',
      classData:[]
    }
  },
  created() {
    let id = this.$route.query.id
    this.getClass()
    if(id){
      this.getDetail(id)
      this.id = id
    }
  },
  methods: {
    getDetail(id){
      this.loading = true
      request.get("/article/detail",{id}).then(e=>{
        if(e.status == 200){
          this.loading = false
          let data = e.data[0]
          let form = {
            title:data.title,
            pic:data.pic,
            author:data.author,
            sort:data.sort,
            class_id:data.class_id,
            product_id:data.product_id,
            content:data.content,
            hits:data.hits
          }
          this.form = form
          this.mod = 'edit'
        }else{
          this.$router.back(-1)
        }
      })
    },
    tabsChange(){

    },
    getClass(){
      request.get("/article/class/list").then(e=>{
        if(e.status == 200){
          let arr = [{id:0,title:'无栏目'}]
          for(let i of e.data){
            if(i.pid == 0){
              i.children = e.data.filter(s=>s.pid == i.id)
              arr.push(i)
            }
          }
          this.classData = arr
        }
      })
    },
    submitForm(){
      // console.log(this.form)
      let form = this.form
      this.$refs.form.validate((valid)=>{
        if(valid){
          if(this.mod == 'add'){
            request.post("/article/add",form).then(e=>{
              if(e.status == 200){
                this.$message.success("添加成功")
                this.$router.back(-1)
              }else{
                this.$message.error("添加失败")
              }
            })
          }else{
            form.id = this.id
            request.post("/article/edit",form).then(e=>{
              if(e.status == 200){
                this.$message.success("修改成功")
                this.$router.back(-1)
              }else{
                this.$message.error("修改失败")
              }
            })
          }
        }
      })
    }
  },
}
</script>

<style scoped>
  .article_detail{

  }
  .article_detail .container{
    width: calc(100% - 32px);
    margin: 16px auto;
    background-color: #ffffff;
  }
  .article_detail .container .body .spin{
    text-align: center;
    margin-bottom: 20px;
    padding: 30px 50px;
    margin: 20px 0;
  }
  .article_detail .container .body{
    padding: 16px;
  }
  .article_detail .container .body .btn{
    margin-left: 20px;
    margin-top: 20px;
  }
</style>